---
title: "Date Field"
description: A form input specifically for entering and selecting dates, supporting various date formats and validation.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/DateField.html#props"]
---

## Basic

A date field allows users to enter and adjust date and time values using a keyboard. Each part of the date is shown in its own editable segment.
<How toUse="date-and-time/date-field/date-field-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/date-field
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='date-field'/>

## Date Time Field
You can also use the date field to select both date and time.
<How toUse="date-and-time/date-field/date-time-field-demo" />

## Validation
When validation is applied, the date field will show a validation message if the entered value is invalid.
<How toUse="date-and-time/date-field/date-field-validation-demo" />

## Controlled
In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.
<How toUse="date-and-time/date-field/date-field-controlled-demo" />

## Uncontrolled
In a controlled date field, the value must be passed as a prop, and the field is not directly editable by the user.
<How toUse="date-and-time/date-field/date-field-uncontrolled-demo" />

## Readonly
In a readonly date field, the value is provided as a prop, and the field is not editable by the user.
<How toUse="date-and-time/date-field/date-field-readonly-demo" />

## Disabled
A disabled date field is non-interactive and visually represented in a disabled state.
<How toUse="date-and-time/date-field/date-field-disabled-demo" />
